<template>
  <div class="orderInfoChange-container">
    <!-- 航班信息延误校验 -->
    <div class="container-delay">
      <el-form :model="orderquery" size="mini">
        <div style="display: flex; margin: 0 0 10px 0">
          <el-form-item label="订单号 " style="display: flex; margin: 0 30px 0 0">
            <el-input v-model="orderquery.orderid"></el-input>
          </el-form-item>

          <el-form-item label="旅客姓名  " style="display: flex; margin: 0 30px 0 0">
            <el-input v-model="orderquery.passengername"></el-input>
          </el-form-item>

          <el-form-item label="PNR  " style="display: flex; margin: 0 30px 0 0">
            <el-input v-model="orderquery.pnr"></el-input>
          </el-form-item>
          <el-form-item label="航班  " style="display: flex; margin: 0 30px 0 0">
            <el-input v-model="orderquery.newFlight"></el-input>
          </el-form-item>

        </div>
        <div style="display: flex; margin: 0 0 10px 0">
          <el-form-item label="起飞时间" style="display: flex; margin: 0 30px 0 0">
            <el-date-picker value-format="yyyy-MM-dd  HH:mm:ss" v-model="orderquery.newDepTime" type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="距离起飞时间" style="display: flex; margin: 0 30px 0 0">
            <p class="distance">
              <el-input v-model="orderquery.distancetime" :value-format="format"></el-input><span>小时</span>
            </p>

          </el-form-item>

          <el-form-item label="变动类型" style="display: flex; margin: 0 30px 0 0">
            <template slot="label"></template>
            <el-select v-model="orderquery.changevalue" placeholder="全部" clearable>
              <el-option v-for="item in changeoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>

          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 10px 0">
          <el-form-item label="状态 " style="display: flex; margin: 0 30px 0 0">
            <el-select v-model="orderquery.operationtypeinteger" placeholder="待处理" clearable>
              <el-option v-for="item in waitdispose" :key="item.id" :label="item.names" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="渠道 " style="display: flex; margin: 0 30px 0 0">
            <el-select v-model="orderquery.ticketWay" placeholder="全部" clearable>
              <el-option v-for="item in channeloptions" :key="item.id" :label="item.names" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="短信状态 " style="display: flex; margin: 0 30px 0 0">
            <el-select v-model="orderquery.issendmsg" placeholder="全部" clearable>
              <el-option v-for="item in noteoptions" :key="item.id" :label="item.names" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="航变日期  " style="display: flex; margin: 0 30px 0 0">
            <el-date-picker v-model="orderquery.changeDate" value-format="yyyy-MM-dd  HH:mm:ss" type="datetime"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item tyle="display: flex; margin: 0 30px 0 0">
            <el-button size="mini" type="primary" @click="immediatelyquery">查询</el-button>
            <el-button size="mini" type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </div>
      </el-form>




    </div>
    <!-- 航班信息表格 -->
    <div class="container-table">
      <el-table :data="tableData" class="account_table" size="mini" border :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }">
        <el-table-column fixed prop="orderid" label="订单号" align="cneter">
        </el-table-column>
        <el-table-column fixed prop="issendmsg" label="短信状态">
        </el-table-column>
        <el-table-column prop="ticketWay" label="渠道">
          <template slot-scope="scope">
            <template v-if="scope.row.ticketWay == 'Spring'">春秋</template>
            <template v-if="scope.row.ticketWay == 'LinkStar'">领达</template>
            <template v-if="scope.row.ticketWay == 'Qunar'">去哪儿</template>
            <template v-if="scope.row.ticketWay == 'DR'"> 瑞丽</template>
            <template v-if="scope.row.ticketWay == 'G5'"> 华夏</template>
            <template v-if="scope.row.ticketWay == 'HangBanGuanJia'"> 航班管家</template>

          </template>
        </el-table-column>
        <el-table-column prop="ticketcount" label="票量"> </el-table-column>
        <el-table-column prop="passengername" label="乘客名"> </el-table-column>
        <el-table-column prop="pnr" label="PNR"> </el-table-column>
        <el-table-column prop="newTrip" label="航程"> </el-table-column>
        <el-table-column prop="newFlight" label="航班"> </el-table-column>
        <el-table-column prop="newDepTime" label="起飞时间"> </el-table-column>

        <el-table-column prop="departureTime" label="距离起飞时间"> </el-table-column>
        <!-- <el-table-column prop="departureTime" label="变动类型"> </el-table-column> -->


        <el-table-column prop="changemessage" label="变动内容"> </el-table-column>
        <el-table-column prop="operationtypeinteger" label="处理状态">
          <template slot-scope="scope">
            <template v-if="scope.row.operationtypeinteger == 'inProcess'">处理中</template>
            <template v-if="scope.row.operationtypeinteger == 'pending'">待处理</template>
            <template v-if="scope.row.operationtypeinteger == 'complete'">完成</template>
            <template v-if="scope.row.operationtypeinteger == 'confirmed'"> 已确认</template>
          </template>
        </el-table-column>

        <el-table-column prop="addtime" label="添加时间"> </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleClick(scope.row)" size="mini">操作</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination  align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
    style="margin:20px 0 0  0 "
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!-- 弹框后的信息 -->
    <div class="container-diag">
      <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" title="延误信息处理" width="1100px">
        <el-descriptions title="" direction="horizontal" :column="2" border>
          <el-descriptions-item contentStyle="color:#000000;width:80%;height:100%">
            <template slot="label"> 黑屏信息截图</template>
            <p>{{ datalist.qnscConent }}</p>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="" direction="vertical" :column="8" border>
          <el-descriptions-item label="旅客姓名">{{ datalist.passengername }}</el-descriptions-item>
          <el-descriptions-item label="PNR">{{ datalist.pnr }}</el-descriptions-item>
          <el-descriptions-item label="航班" :span="2">{{ datalist.newFlight }}</el-descriptions-item>
          <el-descriptions-item label="起飞时间">
            {{ datalist.newDepTime }}
          </el-descriptions-item>
          <el-descriptions-item label="距离起飞还剩">{{ datalist.departureTime }}</el-descriptions-item>
          <el-descriptions-item label="变动类型">
            {{ datalist.changetype }}
          </el-descriptions-item>
          <el-descriptions-item label="变动内容">
            {{ datalist.changemessage }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="radio">
          <el-radio-group v-model="datalist.protect" @change="radiofn1($event)">
            <el-radio label="1" >确认保护</el-radio>
            <el-radio label="2" >不确认保护</el-radio>
          </el-radio-group>
        </div>

        <el-descriptions title="" direction="horizontal" :column="2" border>
          <el-descriptions-item>
            <template slot="label"> 处理结果</template>
            <el-button @click="submit()" class="submit">提交</el-button>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 短信回执</template>
            <el-button @click="updateOrderQt" class="sent">发送</el-button>
          </el-descriptions-item>

          <el-descriptions-item>
            <textarea name="" id="" cols="30" rows="10"></textarea>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <div id="activity">
                <span>变动类型</span>
                <el-select  clearable v-model="datalist.changetype" placeholder="航班延误">
                  <el-option v-for="item in flightoptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </template>
            <template slot="label">
              <div id="activity" class="activitys">
                <span>变动内容</span>
                <el-input placeholder="请输入变动内容" v-model="datalist.changemessage"></el-input>
              </div>
            </template>
            <textarea name="" id="" cols="30" rows="10"></textarea>
          </el-descriptions-item>
        </el-descriptions>

        <el-button style="margin:20px 0 0 45%" type="primary" @click="dialogFormVisible=false">关闭</el-button>
      </el-dialog>
      <!-- <input type="text" v-model="inputs"> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "orderInfoChange",
  data() {
    return {
      orderId: "",
      inputs:"",
      datalist: {
        passengername: "",
        protect: "1",
        changetype: "",
        qnscConent: "",
        orderid: "",
        newDepTime: "",
        newFlight: "",
        pnr: "",
        changemessage: "",
        departureTime: "",
      },
      total: 0,
      pageSize: 10,
      currentPage: 1,
      pageTotal: 0,


      format: "yyyy-MM-dd",
      // 查询条件 
      orderquery: {
        orderid: "",
        passengername: "",
        pnr: "",
        newFlight: "",
        newDepTime: "",
        distancetime: "",
        changevalue: "",
        operationtypeinteger: "",
        ticketWay: "",
        issendmsg: "",
        changeDate: "",

      },
      dialogFormVisible: false,


      changeoptions: [], //变动类型数组
      //渠道数组
      channeloptions: [
        {
          id: "Spring",
          names: "春秋",
        },
        {
          id: "LinkStar",
          names: "领达",
        },
        {
          id: "Qunar",
          names: "去哪儿",
        },
        {
          id: "DR",
          names: "瑞丽",
        },
        {
          id: "G5",
          names: "华夏",
        },
        {
          id: "HangBanGuanJia",
          names: "航班管家",
        },
      ],
      //状态数组
      waitdispose: [
        {
          id: "pendin",
          names: "待处理",
        }, {
          id: "inProces",
          names: "处理中",
        }, {
          id: "complete",
          names: "完成",
        }, {
          id: "confirmed",
          names: "已确认",
        },
      ],


      //短信状态绑定数组
      noteoptions: [
        {
          id: 0,
          names: "未发送",
        }, {
          id: 1,
          names: "已发送",
        }


      ],
      blackscreen: "", //黑屏信息绑定值
      radio: "1", //单选按钮

      size: "",
      flightvalue: "", //航班延误绑定值
      flightoptions: [], //航班延误数组
      variation: "", //变动内容绑定值
      date1: "", //时间
      value: "",
      options: "",


      tableData: [
      ], //表格数组
      Orderid:"",//发送时的订单号

    };
  },
  mounted() {
    this.flightOrderQtList()

  },
  watch:{
    inputs(newvalue,oldvalue){
       console.log('检测的旧值',oldvalue)
      console.log('我是旧值',newvalue)
    }
  },
  methods: {
    // 点击单选框的按钮
    radiofn1(value) {
      console.log('单选框里面的valye', value) //是处理状态
      this.protect=value; //确认保护和未保护
    },
    reset() {
      this.orderquery = {}

      this.flightOrderQtList();

    },
    // 查询条件
    immediatelyquery() {
      this.flightOrderQtList();
    },
    //列表数据
    flightOrderQtList() {
      this.$axios
        .flightOrderQtList({
          // 订单号
          orderid: this.orderquery.orderid,
          //乘客名
          passengername: this.orderquery.passengername,
          // PNR
          pnr: this.orderquery.pnr,
          // 航班号
          newFlight: this.orderquery.newFlight,
          // 起飞时间
          newDepTime: this.orderquery.newDepTime,
          // 处理状态：
          operationtypeinteger: this.orderquery.operationtypeinteger,
          // 出票途径
          ticketWay: this.orderquery.ticketWay,
          // 是否发送短信
          issendmsg: this.orderquery.issendmsg,
          // 航变日期
          changeDate: this.orderquery.changeDate,
        })
        .then((res) => {
          console.log(res);
          // if (res.code == "200") {
          console.log(res, res.data)
          this.total = res.total;
          this.tableData = res.data;
          let arr = res.data
          var timer = this.orderquery.distancetime;
          this.arr1 = this.screen(arr, timer)
          // } else {
          //   this.$message.error("查无次信息");
          // }
        })
      // .catch((err) => {
      //   this.$message.error("查无次信息");
      //   console.log(err);
      // });
    },

    // 起飞前时间小时
    screen(arr, timer) {
      // arr.forEach(item => {
      //   var str = item.departureTime;
      //   var index = str.lastIndexOf("小");
      //   // str = str.substring(index - 1, str.length);
      //   str = str.substring(-1, index); //截取小时之前的数据
      //   if (str == timer) {
      //     // a
      //     // 返回匹配上的这条数组
      //   } else {
      //     console.log(str == timer)
      //     // 不等于返回不匹配的这条数组
      //   }
        // 先将数据里的item.departureTime 截取到几个小时
        // item.item = item.invoiceHeadsUp + item.identificationNumber
        // if (timer == item.departureTime) {
        //   console.log(timer == item.departureTime)
        //   return arr

        // } else {
        //   console.log(timer == item.departureTime)
        // return arr
        // }



      // });
      console.log('重新更新数据了', arr)


    },
    // 点击操作出弹框  带出订单号-- 处理状态
    handleClick(row) {
      console.log(row, '是点中编辑这个一行所在内容')
      this.dialogFormVisible = true;
      this.operationtypeinteger=row.operationtypeinteger
      console.log('处理状态', this.operationtypeinteger)
      // 延误信息处理-个人
      this.flightOrderQt(row.orderid)

    },
    // 延误信息处理-个人 弹框里面的信息
    flightOrderQt(orderId) {
      localStorage.setItem("isToken", true);
      this.$axios
        .flightOrderQt({
          // 订单号
          orderId: orderId
        })
        .then((res) => {
          this.datalist = res.data
          this.Orderid=res.data.orderid;
        //   console.log(('订单号--',res.data.orderid)('变动类型',res.data.changetype),
        //  ('处理状态---',this.operationtypeinteger))
          // this.updateOrderQt(res.data.orderid)
        })

      

    },
    // 弹框的提交事件
    submit() { 

    },

    // 发送
    updateOrderQt() {
      localStorage.setItem("isToken", true);
      this.$axios
        .updateOrderQt({
          orderid: this.Orderid, //是单个的订单号
          protect: this.datalist.protect,
          operationtypeinteger: this.datalist.operationtypeinteger,
          changetype: "变动类型（暂无）",//this.datalist.changetype,
          changemessage: this.datalist.changemessage
        })
        .then((res) => {
          console.log(res)
           this.$message({
              message: res.msg, 
              type: 'success'
            });
            this.dialogFormVisible = false
            this.immediatelyquery()
        })
    },

    // 分页
    handleSizeChange(value) {
      console.log("1", value);
      localStorage.setItem("pageSize", value);
      localStorage.setItem("pageNum", 1);
      this.flightOrderQtList();
      this.pageSize = value;
    },
    // search() {
    //   localStorage.setItem("pageNum", this.currentPage);
    //   localStorage.setItem("pageSize", 10);
    //   this.flightOrderQtList();
    // },
    handleCurrentChange(value) {
      console.log("2", value);
      localStorage.setItem("pageNum", value);
      localStorage.setItem("pageSize", this.pageSize);
      this.flightOrderQtList();
      // orders = res.data;
    },
  },
};
</script>

<style scoped>
.container-delay {
  width: 98%;
  margin-left: 20px;
  margin-top: 20px;
}

.flydata {
  width: 350px;
  display: flex;
}

.distance {
  width: 350px;
  display: flex;
}

.distance span {
  display: inline-block;
  width: 50px;
  line-height: 30px;
  margin-left: 10px;
}

.container-table {
  margin-left: 20px;
  width: 98%;
}

#activity {
  width: 100%;
  height: 92px;
  display: flex;
  padding: 0 !important;
}

#activity span {
  display: inline-block;
  width: 180px;
  line-height: 40px;
  margin-left: 15px;
}

.activitys {
  margin-top: 20px;
}



.query button {
  width: 180px;
  height: 40px;
  margin: auto;
  background-color: #6090EC;
  color: #Fff;
  margin-left: 42%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.radio {
  height: 40px;
  line-height: 40px;
}

.submit {
  width: 137px;
  height: 46px;
  background-color: #6090EC;
  color: #fff;
}

.sent {
  width: 137px;
  height: 46px;
  background-color: #6090EC;
  color: #fff;
}
</style>